<template>
  <div class="left-nac-container">
    <a-layout id="components-layout-demo-top-side">
      <a-layout-header class="header">
        <div class="logo" />
        <a-menu class="header-menu"
                theme="dark"
                mode="horizontal"
                :default-selected-keys="['2']"
                :style="{ lineHeight: '60px' }"
        >
          <a-sub-menu key="sub1">
            <span slot="title" class="top-title">华中云掌柜管理系统</span>
          </a-sub-menu>
        </a-menu>
        <div class="logo-container"><img src='../../images/header-head.png' class="logo-image" /></div>
        <div class="user-name">{{phone}}</div>
        <div class="logo-container-exit" @click="handleUserExit">
          <img src='../../images/header-exit.png' class="exit-image" />
        </div>
      </a-layout-header>
      <a-layout-content style="padding: 0 0; height: 100%">
        <a-layout style="padding: 0 0; background: none; height: 100%" >
          <a-layout-sider width="200" :style="{ background: '#001529', height: '100%' }" v-model="collapsed" collapsible>
            <a-menu theme="dark" mode="inline" :default-selected-keys="[this.value]">
              <a-sub-menu key="workOrder">
                <span slot="title"><a-icon type="snippets"/><span class="left-nav-title">工单库</span></span>
                <a-menu-item key="/index/mend"  @click="menu('/index/mend')">
                  <a-icon type="file-sync" class="solution" />
                  <span>我的工单</span>
                </a-menu-item>
                <a-menu-item key="/index/myWorkOrder"  @click="menu('/index/myWorkOrder')">
                  <a-icon type="file-sync" class="solution" />
                  <span>历史工单</span>
                </a-menu-item>
              </a-sub-menu>
              
              <a-sub-menu key="workOrderService">
                <span slot="title"><a-icon type="file-protect" /><span class="left-nav-title">报单服务</span></span>
                <a-menu-item key="/index/repair"  @click="() => {menu('/index/repair/0')}">
                  <a-icon type="warning" />
                  <span>故障报单</span>
                </a-menu-item>
                <a-menu-item key="/index/researcher"  @click="() => {menu('/index/researcher')}">
                  <a-icon type="copy" />
                  <span>研究院报单</span>
                </a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="managementService" v-if="role === 17">
                <span slot="title"><a-icon type="team" /><span class="left-nav-title">客服管理</span></span>
                <a-menu-item key="/index/signMap"  @click="() => {menu('/index/signMap')}">
                  <a-icon type="compass" />
                  <span>签到地图</span>
                </a-menu-item>
                <a-menu-item key="/index/deploy"  @click="() => {menu('/index/deploy')}">
                  <a-icon type="environment" />
                  <span>片区配置</span>
                </a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="statistics" v-if="role === 17">
                <span slot="title"><a-icon type="pie-chart" /><span class="left-nav-title">统计管理</span></span>
                <a-menu-item key="/index/failureStatistics"  @click="menu('/index/failureStatistics')">
                  <a-icon type="stock" />
                  <span>故障统计</span>
                </a-menu-item>
                <a-menu-item key="/index/serviceStatistics"  @click="menu('/index/serviceStatistics')">
                  <a-icon type="radar-chart" />
                  <span>服务统计</span>
                </a-menu-item>
                <a-menu-item key="/index/researchOrderStatistics"  @click="menu('/index/researchOrderStatistics')">
                  <a-icon type="fund" />
                  <span>技术单统计</span>
                </a-menu-item>
              </a-sub-menu>

              <a-sub-menu key="productRepair">
                <span slot="title"><a-icon type="tool" /><span class="left-nav-title">产品返修</span></span>
                <a-menu-item key="/index/productRepair"  @click="() => {menu('/index/productRepair')}">
                  <a-icon type="file-done" />
                  <span>返修工单</span>
                </a-menu-item>
                <!-- <a-menu-item key="/index/newProductRepair"  @click="() => {menu('/index/newProductRepair')}">
                  <a-icon type="copy" />
                  <span>新建</span>
                </a-menu-item> -->
                <!-- <a-menu-item key="/index/productRepairDetail"  @click="() => {menu('/index/productRepairDetail')}">
                  <a-icon type="copy" />
                  <span>详情</span>
                </a-menu-item> -->
                <a-menu-item key="/index/productRepairStatistics"  @click="() => {menu('/index/productRepairStatistics')}">
                  <a-icon type="copy" />
                  <span>统计</span>
                </a-menu-item>
              </a-sub-menu>

              <a-menu-item key="/index/case"  @click="menu('/index/case')">
                <a-icon type="laptop" />
                <span>案例库</span>
              </a-menu-item>

              <!-- <a-menu-item key="/index/fault"  @click="menu('/index/fault')">
                <a-icon type="pie-chart" />
                <span>故障统计</span>
              </a-menu-item> -->
              
              <!--<template v-if="role === 17 || role === 19">
                <a-menu-item key="/index/district"  @click="menu('/index/district')">
                  <a-icon type="usergroup-add" />
                  <span>片区管理</span>
                </a-menu-item>
              </template>
              <template v-if="role === 18 || role === 20">
                <a-menu-item key="/index/service"  @click="menu('/index/service')">
                  <a-icon type="user-add" />
                  <span>客服管理</span>
                </a-menu-item>
              </template>-->      
            </a-menu>
          </a-layout-sider>
          <a-layout-content :style="{ padding: '0 0', minHeight: '280px' , height: '100%' }">
            <router-view></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout-content>
    </a-layout>
  </div>
</template>


<script>
  import { mapState, mapMutations } from 'vuex'
  import api from '@/server/userConfig';
  export default {
    name: "Index",
    data () {
      return {
        phone: '',
        selectArray: [],
        role: 0,
        collapsed: false,
      }
    },
    computed: {
      ...mapState(['value'])
    },
    methods: {
      menu (router) {
        console.log(router);
        let newRouter = router;
        if (router.indexOf('/index/repair') === 0) {
          newRouter = '/index/repair';
        }
        this.$router.push(router);
        // 点击左侧，实现对应选中;
        this.handleChangeRouter(newRouter)
      },
      // vuex中改变路由的方法;
      ...mapMutations(['handleChangeRouter']),
      getLocalStorageData () {
        const phone = localStorage.getItem('phone');
        if (!phone) {
          this.$router.push('/');
        }
        this.phone = phone;
      },
      handleUserExit () {
        // 点击退出，清理缓存
        this.$Modal.confirm({
          title: '确认退出吗?',
          okText: '确 定',
          cancelText: '取 消',
          onOk: () => {
            localStorage.removeItem('phone');
            this.$router.push('/');
            // 将路由改到/index/mend;
            this.handleChangeRouter('/index/mend')
          },
          onCancel () {},
        });
      },

      // 根据登陆的手机号获取角色id;
      async getRoleId () {
        if (this.phone !== '') {
          const res = await api.getRoleId({phoneNumber: this.phone});
          if (res.MsgCode !== 0) {
            return
          }
          const roleId = res.Data.ID;
          console.log(res);
          localStorage.setItem('belongedDistrict', res.Data.primaryDepartment + ' -- ' + res.Data.secondDepartment);
          //localStorage.setItem('compid', res.Data.compid);
          let userObj = {compid: res.Data.compid, name: res.Data.name, userName: this.phone};
          localStorage.setItem('userData', JSON.stringify(userObj));
          this.role = roleId;
          // 将roleId存入vuex中;
          this.$store.dispatch('roleChange', roleId)
        }
      }
    },
    created () {
      let routerPath = this.$route.path;
      console.log(routerPath);
      if (routerPath.indexOf('/index/case') === 0) {
        routerPath = '/index/case';
      }
      if (routerPath.indexOf('/index/mend/client') === 0) {
        routerPath = '/index/mend';
      }
      if (routerPath.indexOf('/index/mend/sale') === 0) {
        routerPath = '/index/mend';
      }
      if (routerPath.indexOf('/index/mend/new') === 0) {
        routerPath = '/index/mend';
      }
      if (routerPath.indexOf('/index/finish/sale') === 0) {
        routerPath = '/index/finish';
      }
      if (routerPath.indexOf('/index/repair') === 0) {
        routerPath = '/index/repair';
      }
      this.handleChangeRouter(routerPath)
    },
    mounted () {
      // 获取缓存的值;
      this.getLocalStorageData();
      this.getRoleId();
    }
  }
</script>

<style lang="css" scoped>
  @import "./components/style.css";
</style>
